<template xmlns="http://www.w3.org/1999/html">
  <el-dialog v-loading="loading" width="800px" :visible.sync="visible" :title="title" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-steps  :active="pageNo" finish-status="success" align-center style="width: 100%">
      <el-step :title="title1"></el-step>
      <el-step title="KYC审核"></el-step>
      <el-step title="开户"></el-step>
    </el-steps>
    <div class="step_div flex-column justify-center" v-if="pageNo == 2">
      <el-result v-if="va.vaState === 3" icon="warning" title="开户中" subTitle="请耐心结果">
      </el-result>
      <template  v-if="va.vaState === 1 || va.vaState === 5">
        <el-result icon="success" title="KYC成功">
        </el-result>
        <el-button type="primary" style="width: 150px;margin: auto;margin-top: 25px" @click="applyAccount(va)">申请开户</el-button>
      </template>

    </div>
    <div class="step_div flex-column justify-center" v-if="(pageNo === 0 && subPageNo === 0) || pageNo == 1">
      <el-card  v-if="va.vaState === -1" shadow="hover" style="cursor: pointer;background-color:#f9f9f9;width: 260px;margin:auto"
               @click.native="downloadKyc(va)">
        <div class="flex flex-column flex-center">
            <img src="@/assets/va/download_color.png" width="160" height="160">
            <span style="margin-top: 15px">下载KYC材料</span>
        </div>
      </el-card>
      <el-card  v-if="va.vaState === -1" shadow="hover" style="cursor: pointer;background-color:#f9f9f9;width: 260px;margin:auto"
                @click.native="downloadFace(va)">
        <div class="flex flex-column flex-center">
          <img src="@/assets/va/download_color.png" width="160" height="160">
          <span style="margin-top: 15px">下载人脸照片</span>
        </div>
      </el-card>
      <el-empty v-if="va.vaState === -2" description="未上传材料"></el-empty>
      <el-button v-if="pageNo === 0" style="width: 150px;margin: auto;margin-top: 25px" @click="subPageNo = 1">下一步</el-button>
      <el-result v-if="va.vaState === 0" icon="warning" title="KYC审核中" subTitle="请耐心结果">
      </el-result>
    </div>
    <div style="width: 95%;margin-top: 25px;"  v-if="pageNo === 0 && subPageNo >= 1">
      <el-form :inline="true" title="补全KYC信息" ref="form" :model="form" :rules="rules" label-width="120px">
        <template v-if="subPageNo === 1">
          <el-form-item label="个人/企业" prop="isEnt" >
            <el-radio v-model="form.isEnt" label="0">个人</el-radio>
            <el-radio v-model="form.isEnt" label="1">企业</el-radio>
          </el-form-item>
          <el-form-item label="开户名" prop="tenantName" >
            <el-input v-model="form.tenantName" placeholder="输入开户名" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="名字(证件上)" prop="nameOnCert" >
            <el-input v-model="form.nameOnCert" placeholder="请输入证件上的名字" style="width: 500px"></el-input>
          </el-form-item>
          <template v-if="form.isEnt == '1'">
            <el-divider></el-divider>
            <el-form-item label="注册国家/地区" prop="regCountry">
              <el-input v-model="form.regCountry" placeholder="国家码(2位)"  style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="E-MAIL" prop="email">
              <el-input v-model="form.email" placeholder=""  style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="电话区号" prop="phoneAreaCod">
              <el-input v-model="form.phoneAreaCode" placeholder="例如86（不带+)"  style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phoneNum">
              <el-input v-model="form.phoneNum" placeholder=""  style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="企业注册号" prop="regNumber">
              <el-input v-model="form.regNumber" placeholder=""  style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="企业注册地址" prop="regAddress">
              <el-input v-model="form.regAddress" placeholder="英文或拼音"  style="width: 270px"></el-input>
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-input v-model="form.province" placeholder="英文或拼音"  style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-input v-model="form.city" placeholder="英文或拼音"  style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="邮编" prop="postcode">
              <el-input v-model="form.postcode" placeholder="" style="width: 130px"></el-input>
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item label="企业注册⽇期" prop="effectiveDate">
              <el-date-picker
                v-model="form.effectiveDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <br/>
            <el-form-item label="是否⻓期有效" prop="isEnt" >
              <el-radio v-model="form.isLongTerm" label="0">否</el-radio>
              <el-radio v-model="form.isLongTerm" label="1">是</el-radio>
            </el-form-item>
            <br/>
            <el-form-item label="企业有效期(截至)" prop="expirationDate" v-if="form.isLongTerm && form.isLongTerm === '0'">
              <el-date-picker
                v-model="form.expirationDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </template>
          <!--个人开户-->
          <template v-if="form.isEnt == '0'">
            <el-form-item label="姓" prop="firstName">
              <el-input v-model="form.firstName" placeholder="英文或拼音"  style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="名" prop="lastName">
              <el-input v-model="form.lastName" placeholder="英文或拼音" style="width: 150px"></el-input>
            </el-form-item>
<!--            <el-form-item label="中间名(非必填)" prop="middleName">-->
<!--              <el-input v-model="form.middleName" placeholder="" style="width: 110px"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="性别" prop="gender" >
              <el-radio v-model="form.gender" label="1">男</el-radio>
              <el-radio v-model="form.gender" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="出⽣年⽉" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <br/>
            <el-divider></el-divider>
            <el-form-item label="证件类型" prop="certType">
              <el-select v-model="form.certType" style="width:150px" clearable>
                <el-option label="护照" value="13" />
<!--                <el-option label="⾝份证" value="11" />-->
<!--                <el-option label="驾照" value="14" />-->
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="certNum">
              <el-input v-model="form.certNum" placeholder="" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="证件有效期⽇期" prop="effectiveDate">
              <el-date-picker
                v-model="form.effectiveDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <br/>
            <el-form-item label="是否⻓期有效" prop="isEnt" >
              <el-radio v-model="form.isLongTerm" label="0">否</el-radio>
              <el-radio v-model="form.isLongTerm" label="1">是</el-radio>
            </el-form-item>
            <br/>
            <el-form-item label="有效期(截至)" prop="expirationDate" v-if="form.isLongTerm && form.isLongTerm === '0'">
              <el-date-picker
                v-model="form.expirationDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </template>
        </template>
        <template v-if="subPageNo === 2">
          <template v-if="form.isEnt == '1'">
            <el-form-item label="行业类别" prop="industryType">
              <el-select v-model="form.industryType" style="width: 200px" clearable>
                <el-option label="技术服务/商务咨询" value="F1030001" />
                <el-option label="⼴告/社交媒体" value="F1030002" />
                <el-option label="游戏/软件" value="F1030003" />
                <el-option label="进/出⼝外贸" value="F1030004" />
                <el-option label="旅游业/酒店/,餐饮" value="F1030005" />
                <el-option label="物流/航运" value="F1030006" />
              </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="经营地国家" prop="operationRegion">
              <el-input v-model="form.operationRegion" placeholder="两位国家代码,多个国家以英文逗号分割" style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item label="资⾦来源国家" prop="paymentRegions">
              <el-input v-model="form.paymentRegions" placeholder="两位国家代码,多个国家以英文逗号分割" style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item label="资⾦去向国家" prop="exportRegions">
              <el-input v-model="form.exportRegions" placeholder="两位国家代码,多个国家以英文逗号分割" style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item label="预计年交易笔数" prop="historicalAnnualExportVolume">
              <el-select v-model="form.historicalAnnualExportVolume" style="width: 200px" clearable>
                <el-option label="1-99笔" value="0" />
                <el-option label="100-199笔" value="1" />
                <el-option label="200笔以上" value="2" />
              </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="预计年交易额" prop="estimatedAnnualExportVolume">
              <el-select v-model="form.estimatedAnnualExportVolume" style="width: 200px" clearable>
                <el-option label="10万美元以下" value="0" />
                <el-option label="10-50万美元" value="1" />
                <el-option label="50-100万美元" value="2" />
                <el-option label="100-300万美元" value="3" />
                <el-option label="300-500万美元" value="4" />
                <el-option label="500万美元以上" value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="与贝森合作业务场景描述" prop="businessWithBison">
              <el-input v-model="form.businessWithBison" placeholder="" style="width: 400px"></el-input>
            </el-form-item>
          </template>
          <template v-if="form.isEnt == '0'">
            <el-form-item label="证件签发国家" prop="certArea">
              <el-input v-model="form.certArea" placeholder="两位国家代码" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="居住国家" prop="residenceArea">
              <el-input v-model="form.residenceArea" placeholder="两位国家代码" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="form.address" placeholder="英文或拼音,包含门牌号" style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item label="E-MAIL" prop="email">
              <el-input v-model="form.email" placeholder=""  style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-input v-model="form.province" placeholder="英文或拼音"  style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-input v-model="form.city" placeholder="英文或拼音"  style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="邮编" prop="postcode">
              <el-input v-model="form.postcode" placeholder="" style="width: 130px"></el-input>
            </el-form-item>
          </template>

        </template>
        <template v-if="subPageNo === 3">
          <div class="upload-file" style="text-align: center">
              <span style="margin-right: 100px">文件类型</span>
              <el-radio-group v-model="fileBusiType" style="width: 500px;text-align: left" clearable>
                <template v-if="form.isEnt === '1'" v-for="(item, key) in entBuisArr">
                  <el-radio :label="key" border>{{item}}</el-radio>
                  <br/>
                </template>
                <template v-if="form.isEnt === '0'" v-for="(item, key) in indiBusiArr">
                  <el-radio :label="key" border>{{item}}</el-radio>
                  <br/>
                </template>
              </el-radio-group>
<!--              <el-select v-model="form.estimatedAnnualExportVolume" >-->
<!--                <el-option label="" value="F1010111" />-->
<!--                <el-option label="" value="F1010112" />-->
<!--                <el-option label="" value="F1010114" />-->
<!--                <el-option label="" value="F1010200" />-->
<!--                <el-option label=" " value="F1010099" />-->
<!--              </el-select>-->

            <el-upload
              multiple
              drag
              :action="uploadFileUrl"
              :file-list="fileList"
              :before-upload="handleBeforeUpload"
              :on-success="handleUploadSuccess"
              :show-file-list="false"
              :headers="headers"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">不超过10MB</div>
            </el-upload>

            <!-- 文件列表 -->
            <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
              <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
                <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
                  <span class="el-icon-document"> {{ getFileName(file) }} </span>
                </el-link>
                <div class="ele-upload-list__item-content-action">
                  <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
                </div>
              </li>
            </transition-group>
          </div>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button v-if="subPageNo > 1" type="primary" @click="subPageNo = subPageNo - 1">上一步</el-button>
          <el-button v-if="subPageNo < 3" type="primary" @click="subPageNo = subPageNo + 1">下一步</el-button>
          <el-button v-if="subPageNo === 3" type="primary" @click="submitForm">提交审核</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import { submitKyc, applyAccount } from "@/api/fusion/va/module/bison";
import {fileToComponentName} from "@vue/cli-service/lib/commands/build/resolveWcEntry";
import {listCharge} from "@/api/fusion/va/charge";
export default {
  name: "bison-kyc",
  props: {
    // 值
    value: [String, Object, Array],
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 10,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["doc", "xls", "ppt", "txt", "pdf", "jpg", "jpeg", "png"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      entBuisArr: {
        'F1010111':'营业执照/商业登记证',
        'F1010112':'周年申报表或法团成⽴表/公司查册报告',
        'F1010114':'持股比例⼤于25%的股东有效证件',
        'F1010200':'企业董事有效证件',
        'F1010099':'其它附件/补充材料'
      },
      indiBusiArr: {
        'F1010013':'护照',
        'F1010036':'⼈脸识别通证明⽂件/图⽚',
        'F1010037':'证照核验通过的⽂件/图⽚',
        'F1010099':'居住地址证明(⽔/电/煤租赁合同等)'
      },
      fileBusiType:undefined,
      number: 0,
      title: '',
      visible:false,
      pageNo: 0,
      va:undefined,
      subPageNo: 0,
      title1: '提交KYC材料',
      form: {},
      uploadList: [],
      uploadFileUrl: process.env.VUE_APP_BASE_API  + "/bison/uploadKyc",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
    };
  },

  methods: {
    downloadFace(va) {
      this.download('bison/downloadFace/' + va.mchNo, {
        ...this.queryParams
      }, `人脸照片_${va.mchNo}.png`)
    },
    downloadKyc(va) {
      this.download('bison/downloadKycZip/' + va.mchNo, {
        ...this.queryParams
      }, `KYC材料_${va.vaExt}`)
    },
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        strs += list[i].url + separator;
      }
      return strs != '' ? strs.substr(0, strs.length - 1) : '';
    },
    submitForm() {
      this.loading = true
      this.form.fileList = this.fileList
      submitKyc(this.va.mchNo, this.form).then(response => {
        this.loading = false;
        this.$modal.msgSuccess(response.msg)
        // this.visible = false
      }).catch(() => {
        this.loading = false;
      });
    },
    handleBeforeUpload(file) {
      if(!this.fileBusiType) {
        this.$modal.msgError(`请选择文件类型!`);
        return false;
      }
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split('.');
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$modal.msgError(`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件名是否包含特殊字符
      if (file.name.includes(',')) {
        this.$modal.msgError('文件名不正确，不能包含英文逗号!');
        return false;
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      // file.busiType = this.fileBusiType
      this.$modal.loading("正在上传文件，请稍候...");
      this.number++;
      let  that = this
      return new Promise((resolve) => {
        this.$nextTick(() => {
          this.uploadFileUrl = process.env.VUE_APP_BASE_API  + "/bison/uploadKyc/" + that.fileBusiType + "/" + that.va.mchNo;  //我这里采用字符串拼接，动态重写文件上传路径，这里的路径是专门上传视频的。
          resolve();
        })
      })
      // return true;
    },
    uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.$emit("input", this.listToString(this.fileList));
        this.$modal.closeLoading();
      }
    },
    // 获取文件名称
    getFileName(file) {
      let busiName = ''
      if(this.form.isEnt === '1') {
        busiName = this.entBuisArr[file.busiType]
      } else {
        busiName = this.indiBusiArr[file.busiType]
      }

      let name = file.name
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        return file.busiType + "_" + busiName + "_" + name.slice(name.lastIndexOf("/") + 1);
      } else {
        return file.busiType + "_" + busiName + "_" + name;
      }
    },
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.uploadList.push({ name: res.fileName, url: res.fileName, busiType:res.busiType });
        this.uploadedSuccessfully();
      } else {
        this.pageNo--;
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
        this.$refs.fileUpload.handleRemove(file);
        this.uploadedSuccessfully();
      }
    },
    // 删除文件
    handleDelete(index) {
      this.fileList.splice(index, 1);
      this.$emit("input", this.listToString(this.fileList));
    },
    applyAccount(va) {
      applyAccount(va).then((response)=>{
        this.$modal.msgSuccess(response.msg)
      })
    },
    init(va, name) {
      this.fileList = []
      this.uploadList = []
      this.visible = true
      this.va = va
      this.title = name + '-贝森开户'
      this.pageNo = 0
      this.subPageNo = 0
      // this.form = {isEnt: '0'}
      if(va.vaState === -1 || va.vaState === -2 || va.vaState === 2) {
        this.pageNo = 0
      } else if(va.vaState === 0) {
        this.pageNo = 1
      } else if(va.vaState === 1 || va.vaState >= 3) {
        this.pageNo = 2
      }
    }
  }
};
</script>
<style scoped>
.step_div{
  margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.upload-file-uploader {
  margin-top: 20px;
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>
